import React, { useState } from 'react'
import NavBar from '@/components/NavBar'
import styles from './index.module.scss'
import Textarea from '@/components/Textarea'
import Input from '@/components/Input'
import { useSelector } from 'react-redux'

export default function EditInput({ onClose, type, onCommit }) {
  const defaultValue = useSelector((state) => state.profile.profile[type])
  const [val, setVal] = useState(defaultValue || '')
  return (
    <div className={styles.root}>
      <NavBar
        onLeftClick={onClose}
        extra={
          <span className="commit-btn" onClick={() => onCommit(type, val)}>
            提交
          </span>
        }
      >
        编写{type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className="content-box">
        <h3>编写{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <Input
            className="input-wrap"
            value={val}
            onChange={(e) => setVal(e.target.value)}
          ></Input>
        ) : (
          <Textarea
            placeholder="请输入昵称"
            value={val}
            onChange={(e) => setVal(e.target.value)}
          ></Textarea>
        )}
      </div>
    </div>
  )
}
